<!--
 * @Author: 燕宝 3331753747@qq.com
 * @Date: 2023-01-03 10:02:20
 * @LastEditors: 燕宝 3331753747@qq.com
 * @LastEditTime: 2023-01-05 15:05:00
 * @FilePath: \epidemic-visualization\src\pages\EpidemicDynamic.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="EpidemicDynamic">
    <!-- 疫情数量展示区域 -->
    <div class="epidemic_count">
      <!-- 第一部分 -->
      <div class="currentTime">截止到：{{ new Date() | fmtDate }}</div>
      <div class="first">
        <!-- 新增确诊 -->
        <div class="box">
          <div class="count">{{ hunanData[0].adddaily.conadd }}</div>
          <div class="text">新增确诊</div>
        </div>
        <!-- 新增治愈 -->
        <div class="box">
          <div class="count">{{ hunanData[0].adddaily.cureadd }}</div>
          <div class="text">新增治愈</div>
        </div>
        <!-- 新增死亡 -->
        <div class="box">
          <div class="count">{{ hunanData[0].adddaily.deathadd }}</div>
          <div class="text">新增死亡</div>
        </div>
      </div>
      <!-- 第二部分 -->
      <div class="currentTime">截止到：{{ new Date() | fmtDate }}</div>
      <div class="second">
        <!-- 现存确诊 -->
        <div class="box">
          <div class="count">{{ hunanData[0].conadd }}</div>
          <div class="text">现存确诊</div>
        </div>
        <!-- 现有无症状 -->
        <div class="box">
          <div class="count">{{ hunanData[0].asymptomNum }}</div>
          <div class="text">现有无症状</div>
        </div>
        <!-- 境外积累 -->
        <div class="box">
          <div class="count">{{ hunanData[0].jwsrNum }}</div>
          <div class="text">境外积累</div>
        </div>
        <!-- 累积确诊 -->
        <div class="box">
          <div class="count">{{ hunanData[0].value }}</div>
          <div class="text">累积确诊</div>
        </div>
        <!-- 累积治愈 -->
        <div class="box">
          <div class="count">{{ hunanData[0].cureNum }}</div>
          <div class="text">累积治愈</div>
        </div>
        <!-- 累积死亡 -->
        <div class="box">
          <div class="count">{{ hunanData[0].deathNum }}</div>
          <div class="text">累积死亡</div>
        </div>
      </div>
    </div>
    <!-- 省内病例情况展示区域 -->
    <div class="inland_Covid">
      <div class="currentTime">省内病例情况</div>
      <!-- 固定表头的table -->
      <el-table :data="cityData" height="250" border style="width: 100%">
        <!-- 城市 -->
        <el-table-column prop="name" label="城市" width="180">
        </el-table-column>
        <!-- 现有确诊 -->
        <el-table-column prop="conNum" label="现有确诊" width="180">
        </el-table-column>
        <!-- 新增确诊 -->
        <el-table-column prop="conadd" label="新增确诊" width="180">
        </el-table-column>
        <!-- 新增疑似 -->
        <el-table-column prop="susNum" label="新增疑似"> </el-table-column>
        <!-- 新增死亡 -->
        <el-table-column prop="deathNum" label="新增死亡"> </el-table-column>
        <!-- 新增治愈 -->
        <el-table-column prop="cureNum" label="新增治愈"> </el-table-column>
      </el-table>
    </div>
    <!-- 最新进展展示区域 -->
    <el-button @click="show2 = !show2" class="currentTime">最新进展</el-button>
    <div v-show="show2" class="transition-box">
      <div class="news_process" style="margin-left: -30px">
        <!-- 数据 -->
        <el-timeline>
          <el-timeline-item
            v-for="item in newsData"
            :key="item.id"
            :timestamp="item.publishTime | fmtDate"
            placement="top"
            @click.native="toNewsDetail(item)"
          >
            <el-card>
              <h4>{{ item.title }}</h4>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>

    <!-- 模态框 -->
    <el-dialog
      :title="newsTitle"
      :visible.sync="centerDialogVisible"
      width="75%"
      center
    >
      <div v-html="newsContent"></div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
    <!-- 回到顶部(也可以用锚点) -->
    <div class="toTop">
      <el-button
        type="primary"
        @click="backtop"
        icon="el-icon-caret-top"
        circle
      ></el-button>
    </div>
  </div>
</template>
<script>
import china_covid from "../assets/china_covid.json";
import { get } from "../utils/request.js";
export default {
  data() {
    return {
      china_covid,
      hunanData: [],
      cityData: [],
      newsData: [],
      centerDialogVisible: false,
      newsTitle: "",
      newsContent: "",
      show2: false,
    };
  },
  // 加载数据
  created() {
    this.getNewsData();
  },
  mounted() {
    this.loadData();
    window.addEventListener("scroll", this.showbtn, true);
  },
  methods: {
    // 筛选过滤出湖南的数据
    loadData() {
      let hunanData = this.china_covid.list.filter((item) => {
        return item.name == "湖南";
      });
      this.hunanData = hunanData;
      this.cityData = hunanData[0].city;
    },
    // 获取最新进展的数据
    async getNewsData() {
      let res = await get("/article/findAll");
      console.log(res);
      this.newsData = res.data;
    },
    // 模态框数据
    toNewsDetail(item) {
      // console.log(item.title);
      this.newsTitle = item.title;
      this.newsContent = item.content;
      this.centerDialogVisible = true;
    },
    // 显示回到顶部按钮
    showbtn() {
      let that = this;
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      that.scrollTop = scrollTop;
    },
    /**
     * 回到顶部功能实现过程：
     * 1. 获取页面当前距离顶部的滚动距离（虽然IE不常用了，但还是需要考虑一下兼容性的）
     * 2. 计算出每次向上移动的距离，用负的滚动距离除以5，因为滚动的距离是一个正数，想向上移动就是做一个减法
     * 3. 用当前距离加上计算出的距离，然后赋值给当前距离，就可以达到向上移动的效果
     * 4. 最后记得在移动到顶部时，清除定时器
     */
    backtop() {
      var timer = setInterval(function () {
        let osTop =
          document.documentElement.scrollTop || document.body.scrollTop;
        let ispeed = Math.floor(-osTop / 5);
        document.documentElement.scrollTop = document.body.scrollTop =
          osTop + ispeed;
        this.isTop = true;
        if (osTop === 0) {
          clearInterval(timer);
        }
      }, 30);
    },
  },
};
</script>

<style scoped>
/* 时间样式 */
.currentTime {
  color: #999;
  font-size: 20px;
  margin: 5px;
}
/* 可复用盒子样式 */
.box {
  background-color: #9bb0bb;
  width: 33%;
  height: 140px;
  /* 设置圆角 */
  border-radius: 60vh;
  text-align: center;
}
/* 第一部分布局 */
.EpidemicDynamic .first {
  display: flex;
  /* justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。 */
  justify-content: space-between; /* 均匀排列每个元素
首个元素放置于起点，末尾元素放置于终点 */
}
/* 盒子数量样式 */
.box .count {
  margin-top: 30px;
  font-size: 24px;
  font-weight: bold;
}
/* 盒子标题样式 */
.box .text {
  margin-top: 7px;
  font-size: 24px;
}
/* 第二部分 */
.EpidemicDynamic .second {
  display: flex;
  justify-content: space-around; /* 均匀排列每个元素
每个元素之间的间隔相等 */
  flex-wrap: wrap;
  /* 规定灵活的项目在必要的时候拆行或拆列 */
}
/* 第二部分盒子样式 */
.second .box {
  background-color: #fbf5f1;
  /* margin-bottom属性设置元素的下边距。 */
  margin-bottom: 5px;
}
/* 折叠部分 */
.transition-box {
  margin-bottom: 10px;
  border-radius: 4px;
  text-align: center;
  color: #fff;
  padding: 40px 20px;
  box-sizing: border-box;
  margin-right: 20px;
}
/* 回到顶部 */
.toTop {
  line-height: 50px;
  text-align: center;
  /* 固定定位 */
  position: fixed;
  right: 40px;
  bottom: 40px;
}
</style>